<template>
  <form class="order-form" @submit.prevent="submitOrder">
    <div class="form-item">
      <div
        class="custom-input-number"
        style="background-color: #f9f9f9; cursor: pointer"
        @click="selectPriceDiv"
      >
        <span class="prefix">以最优价下单</span>
        <div class="input"></div>
        <span class="suffix" style="margin-right: 12px">></span>
      </div>
    </div>
    <div class="form-item">
      <!-- <a-input v-model="total" prefix="交易额" class="limit-order-input" suffix="USDT" /> -->
      <div class="custom-input-number">
        <span class="prefix">
          <a-select
            ref="select"
            v-model:value="transType"
            style="width: 100%"
            :bordered="false"
            @change="transTypeChange"
            placement="bottomLeft"
            :dropdownStyle="{ width: '160px' }"
            :options="transNumOptions"
          >
            <a-select-option value="number">数量</a-select-option>
            <a-select-option value="turnover">交易额</a-select-option>
          </a-select>
        </span>
        <a-input
          type="number"
          v-model:value="selectNumber"
          @change="selectNumberChange"
          min="0"
          step="0.1"
          class="input"
        />
        <span class="suffix" style="margin-right: 12px">
          {{ transType == "number" ? `${buyType.currencyType}` : "USDT" }}
        </span>
      </div>
    </div>
    <a-slider id="test" class="limit-order-slider" v-model="sliderValue" />

    <div class="form-item bottom-text-limit-order">
      <label>可用</label>
      <span>0.000000 USDT</span>
    </div>
    <div class="form-item bottom-text-limit-order">
      <label>{{ props.tradeType === "buy" ? "最大可买" : "最大可卖" }}</label>
      <span>-- {{ buyType.currencyType }}</span>
    </div>

    <button
      :class="props.tradeType === 'buy' ? 'submit-btn' : 'submit-btn-green'"
      type="submit"
    >
      {{
        props.tradeType === "buy"
          ? `买入 ${buyType.currencyType}`
          : `卖出 ${buyType.currencyType}`
      }}
    </button>
  </form>
</template>
<script setup>
import { buyType } from "@/data/mockData.js";

import { transNumOptions } from "@/utils/constant.js";
import { ref } from "vue";
const props = defineProps({
  tradeType: String,
});
// const selectPrice = ref(0);
const selectNumber = ref("");
const sliderValue = ref(0);
const transType = ref("turnover");

// const selectPriceChange = (e) => {
//   console.log(e.target.value);
// };

const selectPriceDiv = () => {
  console.log("点击了价格66666");
  const originPriceDiv = document.querySelector(".mantine-1a3apo5");
  if (originPriceDiv) {
    originPriceDiv.click();
  } else {
    console.log(".mantine-1a3apo5元素未找到");
  }
};

const transTypeChange = (e) => {
  console.log(e);
  const originalSelect = document.querySelector(".mantine-1tzqd2b");
  if (originalSelect) {
    console.log(originalSelect, "原始选择框元素,点击了选择框");
    originalSelect.click();
    setTimeout(() => {
      const originalOptionList = document.querySelectorAll(".mantine-t9x8ai");
      console.log(originalOptionList, "原始选择框元素的选项列表");
      if (originalOptionList.length > 0) {
        if (e === "number") {
          originalOptionList[0].click();
        } else if (e === "turnover") {
          originalOptionList[1].click();
        }
        //   originalSelect.dispatchEvent(new Event("change", { bubbles: true }));
      } else {
        console.log(".mantine-t9x8ai元素未找到");
      }
    }, 100);
  } else {
    console.log(".mantine-1tzqd2b元素未找到");
  }
};
const selectNumberChange = (e) => {
  const originalNumberInput = document.querySelector(
    "#spot-market-price-amount-input"
  );
  if (originalNumberInput) {
    originalNumberInput.value = e.target.value;
    originalNumberInput.dispatchEvent(new Event("input", { bubbles: true }));
  } else {
    console.log("#spot-market-price-amount-input元素未找到");
  }
  console.log(e.target.value);
};
</script>
<style scoped>
.order-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.advanced-options {
  /* margin-top: 16px; */
  border-top: 1px solid #eee;
  padding-top: 8px;
}

.advanced-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

.advanced-header span {
  margin-left: 5px;
}

.advanced-content {
  margin-top: 8px;
  display: flex;
  gap: 16px;
}

.advanced-content label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #333;
}

.custom-input-number,
.custom-input {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0 0 0 8px;
  width: 100%;
  height: 40px;
  background: #fff;
}

.custom-input-number .prefix,
.custom-input .prefix {
  color: #666;
  margin-right: 8px;
}

.custom-input-number .input,
.custom-input .input {
  width: 100%;
  border: none;
  outline: none;
  flex: 1;
  text-align: right;
  font-size: 16px;
  background: transparent;
}

.custom-input-number .suffix,
.custom-input .suffix {
  margin-left: 8px;
  color: #666;
}

.custom-input-number .btn-group {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
}

.custom-input-number .btn-group button {
  border: none;
  border-left: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  width: 24px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.custom-input-number .btn-group button:first-child {
  border-bottom: 1px solid #eee;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.limit-order-input {
  width: 100%;
  height: 40px;
}

.limit-order-slider {
  width: 100%;
}

.form-item label {
  width: 60px;
  color: #666;
}

input[type="number"] {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  background: #f2495e;
  color: #fff;
  border: none;
  padding: 12px 0;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.submit-btn-green {
  width: 100%;
  background: #1bb273;
  color: #fff;
  border: none;
  padding: 12px 0;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
}

.bottom-text-limit-order {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  font-size: 12px;
}

.bottom-text-limit-order span {
  color: #333;
}

/* 隐藏 Chrome、Edge、Safari 下的 number input 加减按钮 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 隐藏 Firefox 下的 number input 加减按钮 */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
</style>
